<template>
    <!-- 轮播图 -->
    <div>
        <van-swipe>
            <van-swipe-item>
                <img src="../assets/home/1.png" class="lunbo" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/home/2.png" class="lunbo" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/home/3.png" class="lunbo" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../assets/home/4.png" class="lunbo" alt="">
            </van-swipe-item>
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
    </div>
    <!-- 底部导航 -->
    <div>
        <van-tabbar>
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search" dot>分类</van-tabbar-item>
            <van-tabbar-item icon="friends-o" badge="99+">消息</van-tabbar-item>
            <van-tabbar-item icon="setting-o" @click="router.push('/login')">
                我
            </van-tabbar-item>
        </van-tabbar>
    </div>
    <div  v-for="i in ['1','2','3','4','5','6','1','2','3','4','5','6']">
        <van-skeleton>
            <template #template>
                <div :style="{ display: 'flex', width: '100%' }">
                    <van-skeleton-image />
                    <div :style="{ flex: 1, marginLeft: '16px' }">
                        <van-skeleton-paragraph row-width="60%" />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
        </van-skeleton>
    </div>
</template>
<script setup>
import router from '@/router';

</script>

<style scoped>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
</style>